<template>
  <div id="content">
    <div class="all" v-cloak>
      <!-- 返回标签 -->
      <div class="top" style="display: flex">
        <el-link type="primary" @click="backLast">返回主页</el-link>
        <div style="margin-left: 5px">
          <el-button type="info" size="mini" disabled>
            {{ myInfo.nickname }} 的个人主页</el-button
          >
        </div>
      </div>
      <div class="user">
        <div class="editInfo" v-if="myInfo.uid == uid">
          <el-link type="primary" @click="toUpInfo">修改个人资料</el-link>
        </div>
        <div class="concern">
          <template v-if="myInfo.uid != uid">
            <el-button
              v-if="isConcern"
              type="danger"
              size="mini"
              @click="cancelConcern()"
              >取关ta</el-button
            >
            <el-button
              v-else
              type="success"
              size="mini"
              @click="concernPeople()"
              >关注ta
            </el-button>
          </template>
        </div>

        <div class="userAvatar">
          <el-upload
            class="avatar-uploader"
            action="/wsw/images/updateAvatar"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            name="imgFile"
          >
            <img v-if="userInfo.avatar" :src="userInfo.avatar" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>

        <!-- <div class="userAvatar">
          <img :src="avatar_url" />
        </div> -->
        <div class="name">
          <h2>{{ userInfo.nickname }}</h2>
          <h5>uid: {{ userInfo.uid }}</h5>
        </div>
        <div class="userMessage">
          <el-form
            :model="userInfo"
            label-position="labelPosition"
            label-width="100px"
          >
            <el-form-item label="注册时间：">
              <label> {{ userInfo.registration }} </label>
            </el-form-item>
            <el-form-item label="最后登录：">
              <label>{{ userInfo.latest }} </label>
            </el-form-item>
            <el-form-item label="性别：">
              <label>{{ userInfo.gender }} </label>
            </el-form-item>
            <el-form-item label="邮箱：">
              <label> {{ userInfo.email }}</label>
            </el-form-item>
            <el-form-item label="个人描述：">
              <label v-if="userInfo.description">{{
                userInfo.description
              }}</label>
              <label v-else>此人太懒了，还没有写描述</label>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="service">
        <el-tabs v-model="activeName" :stretch="true" @tab-click="changeList">
          <el-tab-pane label="动态" name="first"></el-tab-pane>
          <el-tab-pane label="喜欢" name="second"></el-tab-pane>
          <el-tab-pane label="关注" name="third"></el-tab-pane>
          <el-tab-pane label="粉丝" name="fourth"></el-tab-pane>
        </el-tabs>
      </div>

      <!-- 下部分 -->
      <div class="bottom">
        <!-- 贴子显示-->
        <div class="message" v-show="activeName == 'first'">
          <div class="nonono" v-if="messagesList.length == 0">
            <span v-if="uid == myInfo.uid">还没有作品哦，快去发布吧</span>
            <span v-else>ta还没有发布过作品哦</span>
          </div>
          <div v-else>
            <div
              class="detail-content"
              v-for="(message, index) in messagesList"
              :key="message.mid"
            >
              <div class="detail">
                <div class="header">
                  <div class="header-left">
                    <div class="avatar">
                      <el-avatar
                        size="medium"
                        :src="userInfo.avatar"
                      ></el-avatar>
                    </div>
                    <div class="username_time">
                      <div class="username">{{ message.nickname }}</div>
                      <div class="time">
                        <i class="el-icon-pie-chart"></i>{{ message.date }}
                      </div>
                    </div>
                  </div>
                  <div class="header-right">
                    <el-button
                      type="danger"
                      size="mini"
                      @click="deleteMsg(message, index)"
                      v-if="myInfo.uid == uid"
                      >删帖</el-button
                    >
                  </div>
                </div>
                <div class="box-content" @click="toDetailMessage(message)">
                  <div class="message-content">
                    <h4>{{ message.title }}</h4>
                    <p>{{ message.content }}</p>
                    <div class="message-imgs" v-if="message.images.length != 0">
                      <div class="imgsbox" v-if="message.images.length == 1">
                        <img
                          :src="message.images[0]"
                          style="
                            max-width: 353px;
                            max-height: 200px;
                            object-fit: cover;
                            border-radius: 5px;
                          "
                        />
                      </div>
                      <template v-if="message.images.length == 2">
                        <div class="imgsbox">
                          <el-image
                            v-for="(imgs, index) in message.images"
                            :key="index"
                            :src="imgs"
                            style="
                              width: 45%;
                              margin-right: 10px;
                              display: inline-block;
                            "
                          ></el-image>
                        </div>
                      </template>
                      <template v-if="message.images.length > 2">
                        <div class="imgsbox">
                          <el-image
                            v-for="(imgs, index) in message.images"
                            :key="index"
                            :src="imgs"
                            style="
                              width: 30%;
                              margin-right: 10px;
                              display: inline-block;
                            "
                          ></el-image>
                        </div>
                      </template>
                    </div>
                  </div>
                  <div class="footer">
                    <div class="watched">
                      <i class="el-icon-view" size="mini"></i>
                      <span>浏览：{{ message.views }}</span>
                    </div>
                    <div class="comments" @click="toMessageDetail(message)">
                      <i class="el-icon-chat-line-square" size="mini"></i>
                      <span
                        >评论<i
                          v-if="message.comments != 0"
                          style="font-size: normal"
                          >:{{ message.comments }}</i
                        ></span
                      >
                    </div>
                    <div class="support" @click="kudos(message.mid, index)">
                      <i
                        v-if="message.mark == 1"
                        class="el-icon-thumb"
                        style="
                          color: #007acc;
                          font-weight: 700;
                          font-size: 15px;
                        "
                        size="medium"
                      ></i>
                      <i v-else class="el-icon-thumb" size="medium"></i>
                      <span
                        >点赞
                        <template v-if="!message.likes == 0">
                          ：{{ message.likes }}
                        </template></span
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 喜欢的作品 -->
        <div class="likes" v-show="activeName == 'second'">
          <div class="nonono" v-if="likeList.length == 0">
            <span v-if="uid == myInfo.uid">还没有点赞的作品哦，快去点赞吧</span>
            <span v-else>ta还没有点赞过作品哟</span>
          </div>
          <div v-else>
            <div
              class="detail-content"
              v-for="likeMsg in likeList"
              :key="likeMsg.mid"
            >
              <div class="detail">
                <div class="header">
                  <div class="header-left" @click="getOtherUser(likeMsg.uid)">
                    <div class="avatar">
                      <el-avatar
                        size="medium"
                        :src="userInfo.avatar"
                      ></el-avatar>
                    </div>
                    <div class="username_time">
                      <div class="username">{{ likeMsg.nickname }}</div>
                      <div class="time">
                        <i class="el-icon-pie-chart"></i>{{ likeMsg.date }}
                      </div>
                    </div>
                  </div>
                </div>
                <div class="box-content" @click="toDetailMessage(likeMsg)">
                  <div class="message-content">
                    <h4>{{ likeMsg.title }}</h4>
                    <p>{{ likeMsg.content }}</p>
                    <div class="message-imgs" v-if="likeMsg.images.length != 0">
                      <div class="imgsbox" v-if="likeMsg.images.length == 1">
                        <img
                          :src="likeMsg.images[0]"
                          style="
                            max-width: 353px;
                            max-height: 200px;
                            object-fit: cover;
                            border-radius: 5px;
                          "
                        />
                      </div>
                      <template v-if="likeMsg.images.length == 2">
                        <div class="imgsbox">
                          <el-image
                            v-for="(imgs, index) in likeMsg.images"
                            :key="index"
                            :src="imgs"
                            style="
                              width: 45%;
                              margin-right: 10px;
                              display: inline-block;
                            "
                          ></el-image>
                        </div>
                      </template>
                      <template v-if="likeMsg.images.length > 2">
                        <div class="imgsbox">
                          <el-image
                            v-for="(imgs, index) in likeMsg.images"
                            :key="index"
                            :src="imgs"
                            style="
                              width: 30%;
                              margin-right: 10px;
                              display: inline-block;
                            "
                          ></el-image>
                        </div>
                      </template>
                    </div>
                  </div>
                  <div class="footer">
                    <div class="watched">
                      <i class="el-icon-view" size="mini"></i>
                      <span>浏览：{{ likeMsg.views }}</span>
                    </div>
                    <div class="comments">
                      <i class="el-icon-chat-line-square" size="mini"></i>
                      <span
                        >评论<i
                          v-if="likeMsg.comments != 0"
                          style="font-style: normal"
                          >:{{ likeMsg.comments }}</i
                        ></span
                      >
                    </div>
                    <div class="support">
                      <!-- <i
                    v-if="likeMsg.mark == 1"
                    class="el-icon-thumb"
                    style="color: #007acc; font-weight: 700; font-size: 15px"
                    size="medium"
                  ></i> -->
                      <i class="el-icon-thumb" size="medium"></i>
                      <span
                        >点赞
                        <template v-if="!likeMsg.likes == 0">
                          ：{{ likeMsg.likes }}
                        </template></span
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 关注的人 -->
        <div class="concern" v-show="activeName == 'third'">
          <div class="nonono" v-if="concernList.length == 0">
            还没有关注的人哦，快去关注吧
          </div>
          <div v-else>
            <div
              class="header"
              v-for="(item, index) in concernList"
              :key="index"
            >
              <div class="header-left">
                <div class="avatar">
                  <el-avatar
                    size="medium"
                    :src="'http://cdn.gdxywsw.club/' + item.avatar"
                  ></el-avatar>
                </div>
                <div class="username_time">
                  <div class="username">{{ item.nickname }}</div>
                  <div class="time" v-if="item.description">
                    <span>{{ item.description }}</span>
                  </div>
                </div>
              </div>
              <div class="header-right">
                <template v-if="item.uid != myInfo.uid">
                  <el-button
                    type="info"
                    size="mini"
                    v-if="item.subscribe == 1 && item.fan == 1"
                    >互相关注</el-button
                  >
                  <template v-else>
                    <el-button
                      type="primary"
                      size="mini"
                      v-if="item.subscribe == 0"
                      @click="concernPeople(item.uid, index)"
                      >关注</el-button
                    >
                    <el-button
                      v-else
                      type="danger"
                      size="mini"
                      @click="cancelConcern(item.uid, index)"
                      >取关</el-button
                    >
                  </template>
                </template>
              </div>
            </div>
          </div>
        </div>
        <!-- 粉丝 -->
        <div class="fans" v-show="activeName == 'fourth'">
          <div class="nonono" v-if="fansList.length == 0">
            还没有粉丝哦，多发布点作品，吸引粉丝吧
          </div>
          <div v-else>
            <div class="header" v-for="(item, index) in fansList" :key="index">
              <div class="header-left">
                <div class="avatar">
                  <el-avatar
                    size="medium"
                    :src="'http://cdn.gdxywsw.club/' + item.avatar"
                  ></el-avatar>
                </div>
                <div class="username_time">
                  <div class="username">{{ item.nickname }}</div>
                  <div class="time" v-if="item.description">
                    <span>{{ item.description }}</span>
                  </div>
                </div>
              </div>
              <div class="header-right">
                <template v-if="item.uid != myInfo.uid">
                  <el-button
                    type="info"
                    size="mini"
                    v-if="item.subscribe == 1 && item.fan == 1"
                    >互相关注</el-button
                  >
                  <template v-else>
                    <el-button
                      type="danger"
                      size="mini"
                      v-if="item.subscribe == 0"
                      @click="concernPeople(item.uid, index)"
                      >关注</el-button
                    >
                    <el-button
                      v-else
                      type="primary"
                      size="mini"
                      @click="cancelConcern(item.uid, index)"
                      >已关注</el-button
                    >
                  </template>
                </template>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- <div class="load" style="margin-top: 10px">
        <label>ta还没有发布过帖子哦~</label>
        <label>已经到底啦~</label>
      </div> -->
    </div>

    <el-dialog title="个人信息" :visible.sync="dialogFormVisible">
      <el-form :model="updataUserInfo">
        <!-- <el-form-item style="display: flex; justify-content: center">
          <el-avatar
            style="width: 80px; height: 80px"
            src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
          ></el-avatar>
        </el-form-item> -->
        <el-form-item label="昵称">
          <el-input
            style="width: 80%"
            v-model="updataUserInfo.nickname"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-input
            style="width: 80%"
            v-model="updataUserInfo.gender"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="个性签名">
          <el-input
            style="width: 100%"
            v-model="updataUserInfo.description"
            autocomplete="off"
            type="textarea"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelUp">取 消</el-button>
        <el-button type="primary" @click="upMyInfo">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "my-info",
  props: ["uid"],
  data() {
    return {
      activeName: "first",
      myList: [],
      messagesList: [],
      concernList: [],
      MyconcernList: [],
      likeList: [],
      commonConcerList: [],
      fansList: [],
      dialogFormVisible: false,
      updataUserInfo: {
        nickname: "",
        gender: "",
        description: "",
      },
      // imageUrl: "",
      userInfo: {},
      isConcern: false,
    };
  },
  computed: {
    ...mapState({
      myInfo: (state) => state.userInfo.userInfo,
    }),
    // ...mapGetters(["avatar_url"]),
    // userUid() {
    //   return this.$route.params.uid;
    // },
    avatarUrl() {
      return "http://cdn.gdxywsw.club/" + this.userInfo.avatar;
    },

    // 自己是否已关注
    /*
    isMyConcern() {
      let newArr = Array.from(
        new Set(
          [...this.concernList].filter((x) => this.MyconcernList.includes(x))
        )
      );
      return newArr;
    },
  */
  },
  // watch: {
  //   avatarUrl: {
  //     handler(newValue, oldValue) {
  //       console.log(newValue, oldValue);
  //       this.imageUrl = newValue;
  //     },
  //     deep: true,
  //   },
  // },
  methods: {
    setUpdata() {
      this.updataUserInfo = this.myInfo;
      console.log(this.updataUserInfo);
      // this.updataUserInfo.nickname = this.myInfo.nickname;
      // this.updataUserInfo.gender = this.myInfo.gender;
      // this.updataUserInfo.description = this.myInfo.description;
    },

    // 返回上一级
    backLast() {
      this.$router.push("/home");
      // console.log(this.$router);
    },
    handleAvatarSuccess(res) {
      // this.avatar_url = URL.createObjectURL(file.raw);
      if (res.code == 2000) {
        this.imageUrl = "http://cdn.gdxywsw.club/" + res.data;
      }
      this.getInfo();
    },

    // 获取关注列表
    async getConcernList() {
      let result = await this.$API.reqGetConcernList(this.myInfo.uid, this.uid);
      if (result.code == 2000) {
        this.concernList = result.data;
      }
    },

    // 获取自己的关注列表
    /**
    async getMyConcernList() {
      let result = await this.$API.reqGetConcernList(this.myInfo.uid);
      if (result.code == 2000) {
        this.MyconcernList = result.data;
      }
    },
 */

    //获取粉丝列表
    async getFansList() {
      let result = await this.$API.reqUserFans(this.myInfo.uid, this.uid);
      if (result.code == 2000) {
        this.fansList = result.data;
      }
    },

    toUpInfo() {
      this.setUpdata();
      console.log(this.updataUserInfo);
      this.dialogFormVisible = true;
    },
    //更新个人信息
    async upMyInfo() {
      let result = await this.$API.reqUpdateUserInfo(this.updataUserInfo);
      if (result.code == 2000) {
        this.dialogFormVisible = false;
        this.getInfo();
      }

      // this.userInfo.nickname = this.updataUserInfo.nickname;
      // this.userInfo.gender = this.updataUserInfo.gender;
      // this.userInfo.description = this.updataUserInfo.description;
    },
    cancelUp() {
      this.dialogFormVisible = false;
      this.setUpdata();
    },

    // 切换列表
    changeList(e) {
      if (e.index == 0) {
        this.getAllMessage();
      } else if (e.index == 1) {
        this.getLikeMessages();
      } else if (e.index == 2) {
        this.getConcernList();
      } else if (e.index == 3) {
        this.getFansList();
      }
    },

    // 查看所有帖子
    async getAllMessage() {
      let result = await this.$API.reqGetUserAllMessages(
        this.myInfo.uid,
        this.uid
      );
      if (result.code == 2000) {
        this.messagesList = result.data.map((item) => {
          item.avatar = "http://cdn.gdxywsw.club/" + item.avatar;
          let newImages = [];
          for (let i of item.images) {
            i = "http://cdn.gdxywsw.club/" + i;
            newImages.push(i);
          }
          item.images = newImages;
          return item;
        });
      }
    },

    // 查看信息
    async getInfo() {
      let result = await this.$API.reqGetOtherPeopleInfo(this.uid);
      if (result.code == 2000) {
        result.data.avatar = "http://cdn.gdxywsw.club/" + result.data.avatar;
        this.userInfo = result.data;
      }
    },

    // 查看具体帖子
    toDetailMessage(message) {
      let userInfo = this.myInfo;
      this.$router.push({ name: "delMsg", params: { message, userInfo } });
    },

    // 查看发帖人信息
    getOtherUser(uid) {
      if (this.userInfo.nickname) {
        this.$router.push({ name: "myInfo", params: { uid } });
      } else {
        this.$message({
          message: "请先登录",
          type: "info",
        });
      }
    },

    // 查看点赞过的帖子
    async getLikeMessages() {
      console.log("222222222222222");
      let result = await this.$API.reqUserLikesMsg(this.myInfo.uid, this.uid);
      if (result.code == 2000) {
        console.log(99999999999999);
        this.likeList = result.data.map((item) => {
          item.avatar = "http://cdn.gdxywsw.club/" + item.avatar;
          let newImages = [];
          for (let i of item.images) {
            i = "http://cdn.gdxywsw.club/" + i;
            newImages.push(i);
          }
          item.images = newImages;
          return item;
        });
      }
    },

    // 是否关注
    async checkConcern() {
      let result = await this.$API.reqIsConcern(this.uid);
      if (result.code == 2000) {
        this.isConcern = result.data;
      }
    },
    //关注某人
    async concernPeople(uid = this.uid, index) {
      let result = await this.$API.reqConcernPeople(uid);
      if (result.code == 2000) {
        if (index === undefined) {
          this.isConcern = true;
        } else {
          this.$set(this.concernList[index], "subscribe", 1);
          // this.concernList[index].subscribe = 1;
        }
      }
    },
    //取关某人
    async cancelConcern(uid = this.uid, index) {
      let result = await this.$API.reqCancelConcern(uid);
      if (result.code == 2000) {
        if (index === undefined) {
          this.isConcern = false;
        } else {
          this.$set(this.concernList[index], "subscribe", 0);
        }
      }
    },
  },
  created() {
    //在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem("store")) {
      this.$store.replaceState(
        Object.assign(
          {},
          this.$store.state.userInfo,
          JSON.parse(sessionStorage.getItem("store"))
        )
      );
    }

    //在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload", () => {
      sessionStorage.setItem("store", JSON.stringify(this.$store.state));
    });
  },
  mounted() {
    // 获取自己的关注列表
    // this.getMyConcernList();

    this.setUpdata();

    //获取用户信息
    this.getInfo();
    //获取所有帖子
    this.getAllMessage();

    this.checkConcern();
  },
  beforeDestroy() {
    // localStorage.removeItem("user");
    sessionStorage.removeItem("store");
  },
};
</script>

<style lang="less" scoped>
/deep/ .el-dialog__wrapper {
  .el-dialog {
    width: 87%;
  }
}
/deep/ .el-tabs__nav-scroll {
  .el-tabs__nav {
    display: flex;
    // justify-content: space-around;
    width: 100%;
  }
}
.user {
  overflow: hidden;
  margin-top: 8px;
  position: relative;
  .editInfo {
    position: absolute;
    left: 3px;
    top: 0px;
  }
  .concern {
    position: absolute;
    right: 20px;
  }
  // .userAvatar {
  //   margin-top: 10px;
  //   display: flex;
  //   justify-content: center;
  //   img {
  //     width: 120px;
  //     height: 120px;
  //   }
  // }

  .userAvatar {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    img {
      width: 120px;
      height: 120px;
    }
    /deep/ .avatar-uploader .el-upload {
      border: 1px dashed #e0dbdb;
      border-radius: 50%;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409eff;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 150px;
      height: 150px;
      line-height: 150px;
      text-align: center;
    }
    .avatar {
      width: 150px;
      height: 150px;
      display: block;
    }
  }

  .name {
  }
  .userMessage {
    .el-form-item {
      margin-bottom: 10px;
    }
  }
}
.service {
  /deep/ .el-tabs__header {
    margin: 0;
  }
}
.bottom {
  // height: 200px;
  margin-bottom: 30px;

  .message {
  }
  .nonono {
    margin-top: 20px;
    text-align: center;
  }
}
.detail-content {
  margin-top: 10px;
  .detail {
    border: 1px solid #0078d4;
    margin-bottom: 5px;
    // .message-imgs {
    //   display: flex;
    //   justify-content: space-around;
    //   flex-wrap: wrap;
    //   .el-image {
    //     flex: 1;
    //   }
    // }
    .footer {
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-size: 12px;
      font-weight: 400;
      div {
        margin: 3px 0;
        i {
          margin-right: 2px;
        }
      }
    }

    .message-content {
      .message-imgs {
        padding: 3px;
      }
      h4 {
        margin: 5px;
        padding: 0;
      }
      p {
        margin: 5px;
        font-size: 14px;
      }
      .el-image {
        margin: 5px;
      }
    }
  }
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  margin-top: 5px;
  .header-left {
    .avatar {
      margin: 3px;
    }
    display: flex;
    align-items: center;
    .username_time {
      .time {
        font-size: 12px;
      }
    }
  }
  .header-right {
    margin-top: -3px;
    margin-right: 5px;
  }
}
</style>